<template>
    <div class="top-bar-item top-admin_msg" @click="markAsRead" v-if="message">
        <DialogForm
            v-bind:is-drawer="false"
            path="panel/adminMsg/AdminMsg"
            title="消息中心"
            :showFooter="false"
            width="1000px"
            :bodyStyle="{ padding: 0 }"
        >
            <a class="top-bar-btn lyecs-dialogPage">
                <i class="admin-iconfont icon-tongzhi"></i><span>消息</span><span v-if="message.order_count > 0">（新订单 {{message.order_count}}）</span><em class="admin_msg-count" v-if="message.unread_msg_count > 0">{{message.unread_msg_count}}</em>
            </a>
        </DialogForm>
    </div>
    <div class="top-bar-item top-admin_msg" v-if="message">
        <router-link :to="{ path: '/im/index' }" target="_blank">
            <p class="top-bar-btn lyecs-dialogPage">
                <i class="iconfont-admin icon-xiaoxi"></i><span>客服</span><em class="admin_msg-count" v-if="message.im_msg_count > 0">{{message.im_msg_count}}</em>
            </p>
        </router-link>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { getAdminMsgCount } from "@/api/common/common";
import { DialogForm } from "@/components/dialog";
import dayjs from "dayjs";
const message = ref(null);
let pollingInterval = null;
const fetchMessage = async () => {
    try {
        const response = await getAdminMsgCount({start_time: localStorage.getItem("lastOpenTime")}); // 替换为你的API端点
        message.value = response;
    } catch (error) {
        console.error("请求消息失败:", error);
    }
};

const markAsRead = () => {
    message.value.order_count = 0;
    localStorage.setItem("lastOpenTime", String(dayjs().unix()));
};
const startPolling = () => {
    pollingInterval = setInterval(fetchMessage, 15000); // 每15秒请求一次
};

const stopPolling = () => {
    if (pollingInterval) {
        clearInterval(pollingInterval);
        pollingInterval = null;
    }
};

onMounted(() => {
    fetchMessage(); // 组件挂载时立即请求一次
    startPolling(); // 开始轮询
});

onUnmounted(() => {
    stopPolling(); // 组件卸载时停止轮询
});
</script>

<style scoped lang="less">
/* 你的组件样式 */
.top-bar-item {
    position: relative;
    display: flex;
    align-items: center;
}

.top-bar-item .top-bar-btn {
    display: block;
    height: 40px;
    padding: 0 16px;
    margin-right: 10px;
    font-size: 14px;
    color: #788d9b;
    text-align: center;
    transition:
        background 0.2s ease 0s,
        color 0.2s ease 0s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: relative;
}

.top-bar-item .top-bar-btn:hover {
    background: #f7f7f7;
}

.top-bar-item .top-bar-btn .admin-user-photo img {
    width: 26px;
    height: 26px;
    border-radius: 26px;
    margin-right: 10px;
}

.top-bar-item .top-bar-btn i {
    padding: 0 3px;
    font-size: 18px;
}

.top-bar-item .top-bar-btn i.fs-18 {
    font-size: 18px;
}

.top-bar-item .top-bar-btn .noc_count {
    background: #ff9900;
    padding: 4px 7px;
    border-radius: 6px;
    vertical-align: top;
    margin-left: 4px;
}

.top-bar-item .top-bar-btn .admin_msg-count {
    position: absolute;
    left: 10px;
    top: 0px;
    font-size: 12px;
    color: #fff;
    background-color: #f33;
    line-height: 14px;
    padding: 0 5px;
    border-radius: 8px;
    border: 1px solid #fff;
}
@media only screen and (max-width: 767px) {
    .top-bar-item{
        span{
            display: none;
        }
    }
}
</style>
